<template id="recommend">
    <div class="x_recommend">
       <!-- <v-head></v-head>-->
        <div id="recom_con">
            <v-banner></v-banner>
               <div class="banner_bottom">
                   <ul class="ul_list">
                       <li><img id="im_gou" src="../image/48.png" alt="">精选严选</li>
                       <li><img id='im_ming' src="../image/48.png" alt="">专业检测</li>
                       <li><img src="../image/48.png" alt="">退换无忧</li>
                   </ul>
               </div>
                <div class="bao_tian">
                    <span class="s_tian">小马快报</span>
                   <swiper :options="swiperOption" ref="mySwiper" id="swiper_com">
                        <swiper-slide class="swiper_rec" v-for="(mmg,key) in tag4_ad">
                             <a class="s_xin" :href="mmg.url">{{mmg.title}}</a>
                        </swiper-slide>
                   </swiper>
                </div>
            <v-buy></v-buy>
        </div>
        <!--新人礼弹层-->
        <div id="be_mm" v-if="shop_m"></div>
        <img src="../image/new_li.png" alt="" id="new_l" v-if="new_kk">
        <img src="../image/new_cha.png" alt="" id="new_c" @click="get_x()" v-if="new_pp">
        <img src="../image/new_red.png" alt="" id="new_red" v-if="new_re" @click="get_new_people()">
        <img src="../image/new_foot.jpg" alt="" id="new_footer"  v-if="new_foot"  @click="get_res()">
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import buy from './buy.vue'
    import banner from './banner.vue'


    export default {
        name:'recommend',
        data(){
            return{
                swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: false,
                    // swiper configs 所有的配置同swiper官方api配置
                    autoplay: 2000,
                    direction: 'vertical',
                    grabCursor : true,
                    pagination : '.swiper-pagination',
                    paginationClickable :true,
                    mousewheelControl : true,
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,
                    loop: true,
                },
                /*取消分享礼*/
                shop_m:false,
                new_kk:false,
                new_pp:false,
                new_re:false,
                new_foot:false,

                tag4_ad:[],
                //首页每次弹窗的禁止操作在浏览器中
                status_0:'',
            }
        },
        components:{
           'v-buy':buy,
            'v-banner':banner,

        },
        mounted:function(){

            let mode4 = 'news';
            this.GLOBAL.getNew(this,mode4,5);
            
            //分享载入
            this.GLOBAL.get_share(this,'index');

            //新人礼
            this.get_user_gift();
          
        },

        methods:{
            get_user_gift:function(){
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Index.php?mode=footbanner';
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                       let user_gift = temp.data;
                       if(user_gift.is_news != 1){
                            this.shop_m   = true;
                            this.new_kk   = true;
                            this.new_pp   = true;
                            this.new_re   = true;
                            this.new_foot = true;
                       };
                        if(this.GLOBAL.getCookie('status_0')==1){
                            this.shop_m=false;
                            this.new_kk=false;
                            this.new_pp=false;
                            this.new_re=false;
                        }

                    }else{
                       // this.GLOBAL.center_error(this,temp);        
                    }  
                })              
                
            },
            get_x:function(){
                    this.shop_m=false;
                    this.new_kk=false;
                    this.new_pp=false;
                    this.new_re=false;
                this.GLOBAL.setCookie('status_0',1)
            },

            /*测试新人礼页面*/
            get_new_people:function(){
                this.shop_m=false;
                this.new_kk=false;
                this.new_pp=false;
                this.new_re=false;
                this.$router.push("/new_people")
            },
            /*点击进入领红包页面*/
            get_res:function(){
                this.new_foot=false;
                this.$router.push("/new_people")
            },
        }
    }
</script>
<style>
    #new_footer{
        display:block;
        position:fixed;
        width:100%;
        height:0.98rem;
        bottom:0.9rem;
        left:0;
    }
    #new_red{
        display:block;
        position:absolute;
        top: 70%;
        left: 26%;
        width:3.17rem;
        height:0.57rem;
        z-index: 11;
    }
    #be_mm{
        height:100%;
        width:100%;
        background:#000000;
        opacity:0.5;
        position: fixed;
        left:0;
        top:0;
        z-index:9;
    }
    #new_l{
        position:absolute;
        top:20.9%;
        left: 9%;;
        display:block;
        height:6.64rem;
        width:5.25rem;
        z-index: 11;
    }
    #new_c{
        position:absolute;
        top: 14.4%;
        left: 84%;
        z-index: 10;
        width:0.51rem;
        height:0.72rem;
        display:block;
    }
    /*新人礼*/
    .bao_tian{
        width:100%;
        height:0.7rem;
        position:relative;
    }
   /* #recom_con{
        overflow-y: scroll;
    }*/
    /*11111*/
    .x_recommend{
        overflow-x:hidden;
        height:100%;
        /*overflow-y:hidden;
        -webkit-overflow-scrolling: touch;*/
    }
    *{
        margin:0;
        padding:0;
    }
.banner_bottom{
    height:0.48rem;
    width:100%;
    border-bottom: 0.01rem solid #eaeaea;
}
    .ul_list{
        height: 0.48rem;
        width:100%;
        display:flex;
    }
.ul_list li{
    /*display:inline-block;*/
    position:relative;
    height: 0.48rem;
    list-style:none;
    line-height:0.48rem;
    flex:1;
    /*text-align:center;*/
    text-indent: 0.7rem;
   /* padding-left: 0.6rem;*/
    font-size: 0.24rem;
    color:#333;
}
  /* #im_gou{
        left:0.4rem;
    }
   #im_ming{
        left:0.2rem;
    }*/
.ul_list img{
    position:absolute;
    top: 0.1rem;
    left:0.3rem;
    height:0.3rem;
    width: 0.3rem;
}
/*.sp{
    position:relative;
    display:block;
    flex:1;
}*/
   /* .sp img{
        position:absolute;
        top: 0.2rem;
        height:0.34rem;
        width: 0.34rem;
    }*/
   /* .span_1{
        font-size: 0.24rem;
        color:#333;
        float:left;
        line-height:48px;
        margin-left:30px;
    }*/
   #swiper_com .swiper_rec{
        height:0.7rem;
        width:100%;
        font-size:0.26rem;
        line-height:0.7rem;
        text-align:center;
        font-weight:700;
       /* border-bottom:10px solid #f5f4f2;*/
        background:#ffffff;
    }
    #swiper_com{
        height:0.7rem;
        width:100%;
        border-bottom:10px solid #f5f4f2;
    overflow: hidden;

    }
    .tian{
        height:0.8rem;
        width:100%;
        font-size:0.26rem;
        line-height:0.8rem;
        text-align:center;
        font-weight:700;
        border-bottom:10px solid #f5f4f2;
        background:#ffffff;
    }
    .s_tian{
        color: #06a4fe;
        border-right: 1px solid #d5d5d5;
        padding-right: 0.15rem;
        position: absolute;
        top: 0.18rem;
        left: 0.3rem;
        font-size: 0.26rem;
        /* line-height: 0.7rem; */
        text-align: center;
        /*font-weight: 700;*/
       /* margin-left: 0.2rem;*/
        z-index: 3;
    }
    .swiper_rec .s_xin{
        color:#646464;
        overflow: hidden; /*!*自动隐藏文字*!*/
        text-overflow: ellipsis;/*!*文字隐藏后添加省略号*!*/
        white-space: nowrap;/*!*强制不换行*!*/
        display:block;
        text-decoration: none;
        text-indent: 0.5rem;
        width:4rem;
        margin-left:1.2rem;
    }
</style>
